<template>
	<div id="goods_buy_confirm" class="container">
		<div class="title">

			购买商品（{{student.realName}}）
			<div class="close" @click="cancel()"></div>
		</div>

		<div class="content">
			<div class="table">
				<div class="thead">
					<div style="width: 0.6rem;"></div>
					<div style="width: 1.7rem;">名称</div>
					<div>类型</div>
					<div>单价</div>
					<div>购买数量</div>
					<div>合计金额</div>
					<div>应收金额</div>
				</div>
				<div class="tr_div" v-for="(item, index) in countList">
					<div class="tr">
						<div style="width: 0.6rem;">
							<span class="type">{{ item.mode }}</span>
						</div>

						<div style="width: 1.7rem;">{{ item.name }}</div>
						<div>{{ item.type }}</div>
						<div>
							￥{{ item.unitPrice }}
						</div>
						<div>{{ item.buyNum }}</div>
						<div>￥{{ item.sumPrice }}</div>
						<div>￥{{ item.money }}</div>
					</div>
				</div>
			</div>

			<div class="count">
				<div>总计应收：￥{{ money }}</div>
				<br />
				<div class="real_money">
					实际支付：
					<span>￥{{ param.realMoney }}</span>
				</div>
			</div>

			<div class="title_sub">
				<span>*</span>
				支付方式
			</div>
			<div>
				<div class="radio_group">
					<label class="radio" v-for="(item, index) in payType" @click="clickPayType(item.value)">
						<span class="radio_circle" :class="item.value == param.accountRecordData[0].payMode ? 'radio_active' : ''"></span>
						<span class="radio_name">{{ item.name }}</span>
					</label>
				</div>
			</div>

			<div class="title_sub">
				<span></span>
				关联业务
			</div>
			<div class="row">
				<label class="label_2">
					<span>*</span>
					收据单号
				</label>
				<el-input v-model="param.accountRecordData[0].receiptNo" id="receiptNo" style="width:2.7rem;" :disabled="!isReceipt" clearable></el-input>
				<label class="contract" @click="checkReceipt()" :class="isReceipt ? '' : 'contract_check'">无收据</label>
			</div>
			<div>
				<label class="label_2">
					<span></span>
					备注
				</label>
				<el-input v-model="param.remark" id="remark" style="width:8rem ;" clearable></el-input>
			</div>
		</div>
		<div class="btn_div">
			<div class="btn_sure" @click="ok()">{{ sure_text }}</div>
			<div class="btn_cancel" @click="back()">上一步</div>
		</div>
	</div>
</template>

<script>
var vm, dict;
var param = {
	studentId : "",
	orderNo : "",
	realMoney : 0,
	orderTime : null,
	remark : "",
	goodsData : [],
	accountRecordData : [{
		payMode : "",
		receiptNo : "",
		remark : "",
	}]
}
export default {
	data: function() {
		return {
			student: {},
			countList: [],
			sure_text: '确认收款', //确认收款/去支付
			isReceipt: true, //是否有合同
			param: tool.clone(param),
			money : 0,
			//数据字典
			payType: null,
			isFirstPay: true, //是否是第一次进入支付页面
			savePayInfo: {}
		};
	},
	methods: {
		init: function(student, countList) {
			//初始线索和结算列表数据
			vm.student = student;
			vm.countList = countList;
			
			//初始化参数值
			vm.param = tool.clone(param);
			vm.money = 0;
			
			countList.forEach(function(item) {
				vm.money += item.money;
			});
			vm.money = parseFloat(vm.money.toFixed(2));
			
			vm.param.realMoney = vm.money;
			vm.param.studentId = student.studentId;
			vm.param.accountRecordData[0].payMode = vm.payType[0].value;
			
			//初始化默认值
			vm.isFirstPay = true;
			vm.savePayInfo = {};
			vm.isReceipt = true;
		},
		/**
		 * 选择支付方式
		 */
		clickPayType(value) {
			var textMap = {
				1: '确认收款',
				2: '确认收款',
				3: '去支付',
				4: '去支付',
				5: '确认收款',
			};
			vm.param.accountRecordData[0].payMode = value;
			vm.sure_text = textMap[value];
		},
		//提交报名数据
		ok: function() {
			if (!vm.isFirstPay) {
				vm.$emit('ok', vm.savePayInfo.countList, vm.savePayInfo.info);
				return;
			}
			//验证规则
			var rules = [
				{
					judge: !vm.isReceipt || vm.param.accountRecordData[0].receiptNo,
					focus: $('#goods_buy_confirm #receiptNo'),
					tips: '请输入收据单号'
				},
				{
					judge: vm.param.accountRecordData[0].receiptNo.length <= 20,
					focus: $('#goods_buy_confirm #receiptNo'),
					tips: '请输入20个字符以内收据单号'
				},
				{
					judge: vm.param.remark.length <= 100,
					focus: $('#goods_buy_confirm #remark'),
					tips: '请输入100个字符以内的备注'
				}
			];

			if (!tool.validate(rules)) {
				return;
			}

			var counts = vm.countList;

			var param = tool.clone(vm.param);

			//商品列表
			param.goodsData = [];

			for (var i = 0; i < counts.length; i++) {
				var c = counts[i];
				param.goodsData.push({
					goodsId: c.id,
					goodsNum: c.buyNum,
					goodsOneMoney: c.unitPrice,
					totalMoney: c.sumPrice,
					realMoney: c.money
				});
			}
			param.orderSignupState = vm.sure_text == '确认收款' ? 2 : 1;
			param.orderTime = tool.DateToString(new Date(), "yyyy-MM-dd HH:mm:ss");
			param.totalMoney=this.money;
			//报名
			api.goodsBuy(param).then(function(data) {
				if (data.result == '操作成功') {
					var info = tool.clone(param);
					info.money = vm.money;
					//当支付方式为支付宝或者微信时，进入二维码支付页面
					if (info.accountRecordData[0].payMode == 3) {
						info.payName = 'wxpay';
					} else if (info.accountRecordData[0].payMode == 4) {
						info.payName = 'alipay';
					}
					info.orderSigupId = data.orderSignup.orderSigupId; //订单ID
					info.orderPayState = data.orderSignup.orderPayState; //订单支付状态
					vm.isFirstPay = false; //调到支付或者是其他页面，再次进入将不会产生订单
					vm.savePayInfo = {
						countList: vm.countList,
						info: info
					};
					vm.$emit('ok', vm.countList, info);
				}
				if (data.result == '操作失败，学员已存在') {
					tool.message('学员已存在，无须再报名');
				}
			});
		},
		cancel: function() {
			vm.$emit('cancel');
			vm.isFirstPay = true;
		},
		back: function() {
			vm.$emit('back');
			vm.isFirstPay = true;
		},
		checkReceipt: function() {
			vm.isReceipt = !vm.isReceipt;
			if (!vm.isReceipt) {
				vm.param.orderNo = '';
			}
		}
	},
	mounted: function() {},
	created: function() {
		vm = this;
		dict = tool.getItem(lsKey.dict, true);
		vm.payType = dict['pay_mode'];
	}
};
</script>
<style scoped src="@/style/module/radio.css"></style>
<style scoped src="@/style/module/dialog.css"></style>
<style scoped src="@/style/module/table2.css"></style>
<style scoped>
.radio_group {
	color: #333333;
	font-size: 0.18rem;
	padding-left: 0.2rem;
	padding-bottom: 0.05rem;
}

.radio_circle {
	top: 0.01rem;
}

.tr > div,
.thead > div {
	width: 1.4rem;
}

.tr_two_row {
	padding-top: 0.05rem;
	line-height: 0.2rem;
}

.content {
	padding: 0 0.3rem;
}

.info {
	font-size: 0.14rem;
	line-height: 0.3rem;
	padding: 0.05rem 0 0.1rem 0;
	overflow: hidden;
}

.info > div {
	float: left;
}

.label {
	padding-right: 0.05rem;
	color: #666666;
}

.value {
	width: 1.9rem;
	height: 0.3rem;
	font-size: 0.16rem;
	color: #333333;
	letter-spacing: 0.01rem;
}

.type {
	margin-left: 0.1rem;
	display: inline-block;
	height: 0.2rem;
	line-height: 0.2rem;
	font-size: 0.12rem;
	background-color: #3885f8;
	color: white;
	border-radius: 0.05rem;
	padding: 0 0.05rem;
	margin-right: 0.03rem;
}

.count {
	padding: 0.1rem 0.1rem 0.1rem 0;
	/*margin-bottom: 0.05rem;*/
	text-align: right;
	line-height: 0.3rem;
	color: #333333;
	font-size: 0.18rem;
	border-bottom: 0.01rem solid #f3f6fc;
	overflow: hidden;
}

.count > div {
	float: right;
}

.reduce {
	font-size: 0.16rem;
	cursor: pointer;
}

.earnest {
	font-size: 0.16rem;
	cursor: pointer;
	/*margin-bottom: 0.08rem;*/
}

.earnest_check {
	display: inline-block;
	vertical-align: middle;
	width: 0.25rem;
	height: 0.25rem;
	background-size: 0.16rem;
	background-repeat: no-repeat;
	background-position: center;
	background-image: url(../../../assets/img/clue_manage/check_no.png);
	position: relative;
	bottom: 0.01rem;
}

.earnest_check_active {
	background-image: url(../../../assets/img/clue_manage/check_yes.png);
}

.real_money {
	padding-top: 0.08rem;
}

.real_money > span {
	font-size: 0.26rem;
	color: #fc7301;
}

.title_sub {
	font-size: 0.22rem;
	color: #333333;
	line-height: 0.6rem;
}

.title_sub span {
	display: inline-block;
	color: red;
	width: 0.2rem;
	position: relative;
	top: 0.02rem;
}

.row {
	margin-bottom: 0.1rem;
}

.label_2 {
	display: inline-block;
	width: 1.05rem;
	font-size: 0.16rem;
	color: #666666;
}

.label_2 > span {
	display: inline-block;
	color: red;
	width: 0.18rem;
	position: relative;
	top: 0.01rem;
}

.contract {
	margin-left: 0.1rem;
	display: inline-block;
	min-width: 0.75rem;
	padding-left: 0.22rem;
	font-size: 0.16rem;
	color: #666666;
	vertical-align: middle;
	background-size: 0.16rem;
	background-repeat: no-repeat;
	background-position: left center;
	background-image: url(../../../assets/img/clue_manage/check_no.png);
	cursor: pointer;
	user-select: none;
}

.contract_check {
	background-image: url(../../../assets/img/clue_manage/check_yes.png);
}
</style>
